<template>
  <div class="waterplant-container">
    <!-- <el-card shadow="always" class="card"> -->
      <el-form :inline="true" :model="form" ref="form">
        <el-form-item label="查询时间：" prop="createTime">
          <el-date-picker
            style="width:300px;"
            v-model="form.createTime"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" size="small">查询</el-button>
          <el-button class="ml20" @click="handleReset" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="mb20 tr">说明：点击各浮游动物指标值，可查看该动物的优势种数据。</div>
      <el-table :data="tableData">
        <el-table-column prop="time" label="监测时间"></el-table-column>
        <el-table-column prop="sum" label="浮游动物总生物量（mg/L）">
          <template slot-scope="scope">
            <span >{{ $toFixed(scope.row.sum, 3) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="copepods" label="桡足类（mg/L）">
          <template slot-scope="scope">
            <span :class="{'dialog-color': scope.row.copepods > 0 }" @click="showDialog( scope)">{{ $toFixed(scope.row.copepods, 3) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="clover" label="枝角类（mg/L）">
          <template slot-scope="scope">
            <span :class="{'dialog-color': scope.row.clover > 0 }" @click="showDialog(scope)">{{ $toFixed(scope.row.clover, 3) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="rotifer" label="轮虫（mg/L）">
          <template slot-scope="scope">
            <span :class="{'dialog-color': scope.row.rotifer > 0 }" @click="showDialog(scope)">{{ $toFixed(scope.row.rotifer, 3) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="protozoa" label="原生动物（mg/L）">
          <template slot-scope="scope">
            <span :class="{'dialog-color': scope.row.protozoa > 0 }" @click="showDialog(scope)">{{ $toFixed(scope.row.protozoa, 3) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt15 tr"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    <!-- </el-card> -->
    <el-dialog
      v-if="dialogTableVisible"
      :visible.sync="dialogTableVisible"
      title="优势种查看"
      width="600px"
    >
      <component :is="currentView" :currentItem="currentItem" @close="close" type="2"></component>
    </el-dialog>
  </div>
</template>

<script>
import advantage from './advantage.vue'
import { animalktonDataQuery } from '@/api/water'

export default {
  name: 'p_search',
  components: {
    advantage
  },
  data () {
    return {
      form: {
        createTime: '',
        startTime: '',
        endTime: ''
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      dialogTableVisible: false,
      currentView: '',
      currentItem: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      let search = {
        page: this.currentPage,
        size: this.pageSize,
        startTime: this.form.createTime ? this.form.createTime[0] : '',
        endTime: this.form.createTime ? this.form.createTime[1] : ''
      }
      animalktonDataQuery(search).then(res => {
        if (res.code === 200) {
          if (res.data && res.data.list) {
            this.tableData = res.data.list
            this.total = res.total
          } else {
            this.tableData = []
            this.total = res.total
          }
        } else {
          this.tableData = []
          this.total = 0
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      }).catch((err) => {
        this.$message({
          type: 'error',
          message: '获取数据失败！'
        })
      })
    },
    // 点击重置
    handleReset () {
      this.$refs.form.resetFields()
      this.handleSearch()
    },
    // 点击查询
    handleSearch () {
      this.currentPage = 1
      this.getList()
    },
    // 分页
    handleSizeChange (size) {
      this.pageSize = size
      this.getList()
    },
    // 分页
    handleCurrentChange (page) {
      this.currentPage = page
      this.getList()
    },
    showDialog (item) {
      this.dialogTableVisible = true
      this.currentView = 'advantage'
      this.currentItem = {...item.row}
      this.currentItem.tag = item.column.property
      this.currentItem.label = item.column.label
    },
    close () {
      this.dialogTableVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.waterplant {
  &-container {
    margin: 20px;
    .card {
      min-height: 60vh;
    }
    .dialog-color {
      color: #409EFF;
      cursor: pointer;
    }
    .dialog-info {
      margin-top: -20px;
    }
  }
}
</style>
